<template>
  <div class="TabBar">
    <router-link to="/">
      <template>
        <div>
          <van-icon name="wap-home" color="#fc4141" v-if="$route.path=='/'"/>
          <van-icon name="wap-home-o" v-else/>
        </div>
      </template>
      <span>首页</span>
    </router-link>
    <router-link to="/category">
      <template>
        <div>
          <van-icon name="apps-o" color="#fc4141" v-if="$route.path=='/category'"/>
          <van-icon name="apps-o" v-else/>
        </div>
      </template>
      <span>分类</span>
    </router-link>
    <router-link to="/cart">
      <template>
        <div>
          <van-icon name="shopping-cart" color="#fc4141" v-if="$route.path=='/cart'"/>
          <van-icon name="shopping-cart-o" v-else/>
        </div>
      </template>
      <span>购物车</span>
    </router-link>
    <router-link to="/user">
      <template>
        <div>
          <van-icon name="manager" color="#fc4141" v-if="$route.path=='/user'"/>
          <van-icon name="manager-o" v-else/>
        </div>
      </template>
      <span>我的</span>
    </router-link>
  </div>
</template>

<script>
export default {
  
};
</script>

<style lang="less">
.TabBar {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 1px solid #ccc;
  background-color: #fff;
  display: flex;
  align-items: center;
  a {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fc4141;
    &.router-link-exact-active{
      span{
        color: red;
      }
    }
    .van-icon {
      font-size: 20px;
    }
    span{
      font-size: 12px;
    }
  }
}
</style>